<template>
  <el-card class="box-card" shadow="hover" :body-style="{ padding: '0px 20px' }">
    <template #header>
      <div class="rjfl">
        <span class="rjfl-title">手机游戏推荐</span>
        <span class="rjfl-more"
          >更多
          
        </span>
      </div>
    </template>

    <el-row class="types" :gutter="20">
      <el-col :span="3" class="type" v-for="(it, i) in data" :key="i">
        <img
            :src="it.icon ? it.icon:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'"
            class="image"
          />
          <div style="padding: 8px; display: flex; align-items: center; justify-content: center;">
            <span >{{ it.name }}</span>
          </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import { ref } from "vue";
import { gotoDetail } from "@/utils/action.js";
import { useRoute, useRouter } from "vue-router";
const router = ref(useRouter());

defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});

// const it = ref({
//   name: "梦想世界",
//   icon: "https://placeholder.idcd.com/?w=72&h=72&text=72x72",
//   id: "",
// });
</script>

<style lang="less" scoped>
.types {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  padding: 20px 0;
  margin: 0;
  .type {
    margin: 0 0 16px 0px;

    span {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #1D2127;
      line-height: 14px;
    }
  }
  .image {
    margin: auto;
    width: 86px;
    height: 86px;
    border-radius: 8px;
    object-fit: cover;
  }
}

@media screen and (max-width: 1366px) {
  .type {
    width: 138px !important;
  }
}
</style>
